<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="shortcut icon" href="favicon.ico"/>-->
    <title>高级查询</title>
    <!--使用UI框架样式开始-->
    <link rel="stylesheet" href="../plugins/layui-v2.4.5/css/layui.css" media="all" />
    <!--使用UI样式框架结束-->

    <!--自定义样式开始 -->
    <link rel="stylesheet" href="../public/css/common/base.css" />
    <link rel="stylesheet" href="../public/css/common/common_ui.css" />
    <link rel="stylesheet" href="../public/css/common/model.css">
    <link rel="stylesheet" href="../public/css/common/theme_default.css" />
    <!--自定义样式结束 -->
</head>

<body style="padding-top: 10px;">

<div id="hideMenu" style="display: none;">
    <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed">
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
            </dl>
        </li>
    </ul>
</div>

    <div class="layui-container" style="width: 100%;">
        <div class="model-select-box select-box">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs12">
                            <div class="layui-inline">
                                <label class="layui-form-label">部门名称</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">部门名称</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-inline">
                                <label class="layui-form-label">商机来源</label>
                                <div class="layui-input-inline">
                                    <select name="interest" lay-filter="aihao">
                                        <option value=""></option>
                                        <option value="0">写作</option>
                                        <option value="1" selected="">阅读</option>
                                        <option value="2">游戏</option>
                                        <option value="3">音乐</option>
                                        <option value="4">旅行</option>
                                    </select>
                                </div>
                            </div>


                            <div class="layui-inline">
                                <label class="layui-form-label">客户经理</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <span class="overHiddenSelect">
                                <div class="layui-inline">
                                    <label class="layui-form-label">客户经理</label>
                                    <div class="layui-input-inline">
                                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">录入时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">录入时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="date" id="date1" lay-verify="date" placeholder="yyyy-MM-dd"
                                            autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </span>
                            <div class="layui-inline">
                                <button class="layui-btn layer-icon-btn"><i class="iconfont fn-mr05">&#xe60a;</i>查询</button>
                                <button class="layui-btn layui-btn-primary layer-border-btn">重置</button>
                                <p class="layui-btn open-btn" style="vertical-align: middle"><span>展开</span> <i class="iconfont fn-ml05" >&#xe60b;</i></p>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- 表格开始 -->
        <div class="model-box">
            <div class="table-box">
                <div class="layui-btn-group fn-mb10">
                    <button class="layui-btn layui-btn-primary layui-btn-sm demo" data-type="test2"><i class="layui-icon">&#xe654;</i>增加</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i>删除</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i>导出</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i>导入</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i>模版下载</button>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
                <script type="text/html" id="barDemo">
                    <div class="layui-btn-group table-button tableOpera">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="edit"><i class="iconfont yhui-icon">&#xe766;</i>编辑</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont yhui-icon">&#xe6a5;</i>详情</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont yhui-icon">&#xe6a5;</i>导出</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont yhui-icon">&#xe6a5;</i>删除</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont yhui-icon">&#xe6a5;</i>删除</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont yhui-icon">&#xe6a5;</i>删除</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm tableMoreBtn"><i class="iconfont yhui-icon">&#xe6a5;</i>更多</button>
                    </div>
                </script>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../plugins/jquery-v2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/layui-v2.4.5/layui.js"></script>
<!--页面js开始-->
<script src="../public/js/module/model.js"></script>
<script>
    layui.use(['table', 'form', 'layedit', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        table.render({
            elem: '#test',
            url: '../public/js/module/demo1.json',
            page: {},
            limit: 10,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: 'ID',
                    unresize: true,
                    sort: true,
                    width: 80
                }, {
                    field: 'username',
                    title: '用户名',
                    edit: 'text',
                    templet: '#usernameTpl',
                    width: 80
                }, {
                    field: 'email',
                    title: '邮箱',
                    width: 100
                }, {
                    field: 'sex',
                    title: '性别',
                    edit: 'text',
                    sort: true,
                    width: 80
                }, {
                    field: 'city',
                    title: '城市',
                    width: 120
                }, {
                    field: 'sign',
                    title: '签名'
                }, {
                    field: 'experience',
                    title: '积分',
                    sort: true,
                    width: 80
                }, {
                    field: 'ip',
                    title: 'IP',
                    width: 150
                }, {
                    field: 'logins',
                    title: '登入次数',
                    sort: true,
                    width: 80
                }, {
                    field: 'joinTime',
                    title: '加入时间',
                    width: 120
                }, {
                    // field: 'operatBtn',
                    fixed: 'right',
                    title: '操作',
                    width: 150,
                    toolbar: '#barDemo'

                }]
            ],

        });
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
                console.log(data);
                console.log(tr);
                $('#showInfo').css("display", "inline-block")
            }
        });
    });
</script>
</html>
